<template>
  <div>
    <!-- 列表页商品卡品 -->
    <div
      class="list_item"
      v-for="(item,index) in goods"
      :key="index"
      @click="toDetails(item.mtWmPoiId)"
    >
      <div class="list_item_pic">
        <!-- picUrl商品首图 -->
        <img :src="item.picUrl" />
      </div>
      <div class="list_item_content">
        <p class="list_item_content_name">
          <!-- name商品名称 -->
          {{item.shopName}}
        </p>
        <p class="list_item_content_price">
          <span>
            <!-- minPriceTip起送 -->
            {{item.minPriceTip}}
          </span>
          <span>
            <!-- averagePriceTip人均 -->
            {{item.averagePriceTip}}
          </span>
          <span>
            <!-- distance距离 -->
            {{item.distance}}km
          </span>
        </p>
        <p>
          <span>
            <!-- monthSalesTip月售 -->
            月售:{{item.monthSalesTip}}
          </span>
          <span>
            <!-- deliveryTimeTip配送时间 -->
            {{item.deliveryTimeTip}}分钟
          </span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    goods: {}
  },
  methods: {
    toDetails(id) {
      this.$router.push({
        path: "/details",
        query: {
          id
        }
      });
    }
  }
};
</script>

<style scoped>
.list_item {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-around;
  padding: 0.2rem 0rem;
}
.list_item_pic {
  flex: 1;
}
.list_item_pic img {
  width: 80%;
  height: 80%;
  margin-top: 10%;
  margin-left: 10%;
}
.list_item_content {
  flex: 2;
}
.list_item_content p {
  width: 100%;
  margin-top: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  margin-bottom: 5px;
  margin-top: 8px;
}
.list_item_content p:nth-child(1){
  color: 666;
}
.list_item_content p:nth-child(2){
 font-size: 12px;
}
.list_item_content p:nth-child(3){
color: orange;
 font-size: 12px;
}
</style>